<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="订单号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入平台订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable>
          <el-option
            v-for="dict in dict.type.order_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" :data="orderList">
      <el-table-column label="平台订单号" align="center" prop="orderId" />
      <el-table-column label="商品名称" align="center" prop="goodName" />
      <el-table-column label="支付方式" align="center" prop="payMethod">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_channel" :value="scope.row.payMethod"/>
        </template>
      </el-table-column>
      <el-table-column label="订单金额(元)" align="center" prop="price" />
      <el-table-column label="到期时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支持通道" align="center" prop="payChannel">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_channel" :value="scope.row.payChannel"/>
        </template>
      </el-table-column>
      <el-table-column label="结算费率" align="center" prop="rate" />
      <el-table-column label="订单状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            style="padding-left: 12.7px;"
            v-show="scope.row.status == 2"
            size="mini"
            type="text"
            icon="el-icon-upload"
            @click="renew(scope.row)"
          >续费</el-button>

          <el-button
            v-show="scope.row.status == 2"
            size="mini"
            type="text"
            icon="el-icon-s-platform"
            @click="upgrade(scope.row)"
          >升级</el-button>

          <el-button
            v-show="scope.row.status == 1"
            size="mini"
            type="text"
            icon="el-icon-circle-close"
            @click="updateOrder(1,scope.row)"
          >关闭订单</el-button>

          <el-button
            v-show="scope.row.status == 3 || scope.row.status == 5 || scope.row.status == 6 || scope.row.status == 7"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="updateOrder(2,scope.row)"
          >删除订单</el-button>

          <el-button
            v-show="scope.row.status == 2"
            size="mini"
            type="text"
            icon="el-icon-document-remove"
            @click="updateOrder(3,scope.row)"
          >解除绑定</el-button>


        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%">
      <span>{{ content }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" v-show="type == 1 || type == 2" @click="close()">确 定</el-button>
        <el-button type="primary" v-show="type == 3" @click="relieve()">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="套餐续费"
      :visible.sync="dialogRenewVisible"
      width="28%">
      <span>
        <div class="body">
            <h3><b>{{ goodInfo.goodName }}</b></h3>
            <p style="line-height: 28px;"><b style="float: left">支持通道：</b>
              <dict-tag :options="dict.type.payment_channel" :value="goodInfo.payChannel"/>
            </p>
            <p>
              <b>结算费率：</b><el-tag class="el-tag--danger">{{ goodInfo.rate }}%</el-tag>
              <b style="margin-left: 5%">应用数量：</b><el-tag class="el-tag--plain">{{ goodInfo.appNum }}个</el-tag>
              <b style="margin-left: 5%">商品价格：</b><el-tag class="el-tag--success">￥{{ goodInfo.price }}</el-tag></p>
            <p><b>续费时长：</b><el-input-number :min="1" :max="12" v-model="goodInfo.effectiveTime" size="small" />&nbsp;&nbsp;月</p>
            <el-button
              size="mini"
              icon="el-icon-shopping-cart-full"
              plain
              @click="renewPay(1,goodInfo.id)"
              style="width: 45%;height: 40px"
            >支付宝支付</el-button>
            <el-button
              size="mini"
              icon="el-icon-shopping-cart-full"
              plain
              @click="renewPay(2,goodInfo.id)"
              style="width: 45%;height: 40px"
            >微信支付</el-button>
          </div>
      </span>
    </el-dialog>

    <el-dialog
      title="套餐升级"
      :visible.sync="dialogUpgradeVisible"
      width="30%">
      <span>
        <!--可升级套餐列表-->
        <p><b>请选择升级套餐：</b></p>
        <p>
          <el-select style="width: 100%" v-model="upgradeGoodId" @change="getGoodDetails" placeholder="请选择升级套餐">
            <el-option
              v-for="item in upgradeGood"
              :key="item.id"
              :label="item.goodName"
              :value="item.id">
            </el-option>
          </el-select>
        </p>
        <!--套餐参数 需要显示额外差价-->
        <p><b>套餐详情：</b></p>
        <p style="line-height: 28px;"><b style="float: left">支持通道：</b>
          <dict-tag :options="dict.type.payment_channel" :value="goodInfo.payChannel"/>
        </p>
        <p>
          <b>结算费率：</b><el-tag class="el-tag--danger">{{ goodInfo.rate }}%</el-tag>
          <b style="margin-left: 5%">应用数量：</b><el-tag class="el-tag--plain">{{ goodInfo.appNum }}个</el-tag>
          <b style="margin-left: 5%">商品价格：</b><el-tag class="el-tag--success">￥{{ goodInfo.price }}</el-tag></p>
          <p><b>升级价格：</b><el-tag class="el-tag--danger">￥{{ goodInfo.upgradePrice }}</el-tag></p>
        <el-button
          size="mini"
          icon="el-icon-shopping-cart-full"
          plain
          @click="renewPay(1,goodInfo.id)"
          style="width: 45%;height: 40px"
        >支付宝支付</el-button>
        <el-button
          size="mini"
          icon="el-icon-shopping-cart-full"
          plain
          @click="renewPay(2,goodInfo.id)"
          style="width: 45%;height: 40px"
        >微信支付</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="在线支付"
      :visible.sync="centerDialogVisible"
      width="20%"
      center>
      <span>
        <img :src="payUrl" width="100%" alt="" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">已完成支付</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getUserOrderList, closeOrder, relieveOrder, wxPay, zfbPay} from "@/api/system/order";
import {getGoodInfo,getUpgradeGood} from "@/api/system/good";

export default {
  name: "sorder",
  dicts: ['order_status', 'status', 'payment_channel'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      upgradeGood: [],
      //升级商品ID
      upgradeGoodId: 0,
      //原价格
      oldPrice: 0,
      //距到期月数
      expireMonth: 1,
      //弹窗提示内容
      content: "",
      //弹窗 1
      dialogVisible1: false,
      //窗口类型
      type:1,
      //操作对象ID
      objId: "",
      //续费窗口
      dialogRenewVisible: false,
      //升级窗口
      dialogUpgradeVisible: false,
      //微信支付弹窗
      centerDialogVisible:false,
      //微信支付地址
      payUrl:"",
      //商品信息
      goodInfo: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        tradeNo: null,
        userId: null,
        goodId: null,
        goodName: null,
        payMethod: null,
        price: null,
        endTime: null,
        payChannel: null,
        rate: null,
        status: null,
      },
      queryGoodParams: {
        id: 0,
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    //查询用户当前套餐
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      getUserOrderList(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //续费
    renew(row){
      //获取商品详情
      getGoodInfo(row.goodId).then(response => {
        //获取商品详情
        this.goodInfo = response.data;
        this.dialogRenewVisible = true;
      });
    },
    //续费支付
    renewPay(type){
      if(type == 1){
        zfbPay(this.goodInfo.id,this.goodInfo.effectiveTime).then(response => {
          if(response != null){
            this.payUrl = response;
            this.dialogRenewVisible = false;
            this.dialogUpgradeVisible = false;
            this.centerDialogVisible = true
            this.getList()
          }else{
            this.$modal.msgError("支付失败，请稍后重试 或 联系管理人员！");
          }
        });
      }
      if(type == 2){
        wxPay(this.goodInfo.id,this.goodInfo.effectiveTime).then(response => {
          if(response != null){
            this.payUrl = response;
            this.dialogRenewVisible = false;
            this.dialogUpgradeVisible = false;
            this.centerDialogVisible = true
            this.getList()
          }else{
            this.$modal.msgError("支付失败，请稍后重试 或 联系管理人员！");
          }
        });
      }
    },
    //升级
    upgrade(row){
      //获取商品列表
      this.queryGoodParams.id = row.goodId;
      this.expireMonth = (new Date(row.endTime).getMonth()+1) - (new Date().getMonth()+1);
      if(this.expireMonth == 0){
        this.expireMonth = 1;
      }
      getUpgradeGood(this.queryGoodParams).then(response => {
        if(response != null){
          this.upgradeGood = response;
          if(this.upgradeGood.length != 0){
            this.upgradeGoodId = this.upgradeGood[0].id;
            this.goodInfo = this.upgradeGood[0];
            this.oldPrice = row.price;
            //升级价格计算
            this.goodInfo.upgradePrice = (this.goodInfo.price - this.oldPrice) * this.expireMonth;
            this.dialogUpgradeVisible = true;
          }else{
            this.$modal.msgError("暂无可以升级的套餐！");
          }
        }else{
          this.$modal.msgError("暂无可以升级的套餐！");
        }
      });
    },
    getGoodDetails(id){
      for (let i = 0; i < this.upgradeGood.length; i++) {
        if(id == this.upgradeGood[i].id){
          this.goodInfo = this.upgradeGood[i];
          //计算升级价格
          this.goodInfo.upgradePrice = (this.goodInfo.price - this.oldPrice) * this.expireMonth;
        }
      }
    },
    updateOrder(type,row){
      this.objId = row.id;
      this.type = type;
      if(type == 1){
        this.content = "是否关闭平台订单号为 "+ row.orderId+" 的订单！"
      }else if(type == 2){
        this.content = "是否删除平台订单号为 "+ row.orderId+" 的订单！"
      }else{
        this.content = "是否解绑平台订单号为 "+ row.orderId+" 的订单！"
      }
      this.dialogVisible1 = true;
    },
    close(){
      this.dialogVisible1 = false;
      closeOrder(this.objId).then(response => {
        if(response == true){
          this.$modal.msgSuccess("订单关闭成功！");
          this.getList()
        }else{
          this.$modal.msgError("订单关闭失败！");
        }
      });
    },
    relieve(){
      this.dialogVisible1 = false;
      relieveOrder(this.objId).then(response => {
        if(response == true){
          this.$modal.msgSuccess("解除解绑成功！");
          this.getList()
        }else{
          this.$modal.msgError("订单解绑失败！");
        }
      });
    },
  }
};
</script>
<style>
  .el-dialog__body{
    padding-top: 0;
  }
</style>
